<template>
    <div>
        <!-- 顶部菜单标题 -->
        <div class="menu-group-title">LOGO</div>
        <!-- 菜单列表区域 -->
        <el-menu class="el-menu-vertical-demo"
                 :default-active="currentMenu"
                 background-color="#4da1ff" text-color="#fff" active-text-color="#ffd04b" router
                 @open="handleOpen" @close="handleClose" @select="handleSelect" :collapse="this.$store.state.isCollapse">
             <!-- 一级菜单 -->
            <template v-for="item in slideBarInfo">
                <el-submenu :index="item.index" :key="item.index">
                    <template slot="title">
                        <i class="submenu-icon" :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item :index="ele.index" v-for="ele in item.subnav" :key="ele.index">
                        <span slot="title">{{ele.title}}</span>
                    </el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
        <!-- 展开/折叠菜单图标 -->
        <div class="el-icon-s-fold collapse-icon" @click="collapseNav"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                currentMenu: sessionStorage.getItem('currentMenu'),
                slideBarInfo: [
                    {
                        title: "组织管理",
                        index: "organizationManagement",
                        icon: "el-icon-s-management",
                        subnav: [
                            {title: "法人公司管理", index: "company"}
                        ]
                    },
                    {
                        title: "员工管理",
                        index: "staffManagement",
                        icon: "el-icon-user-solid",
                        subnav: [
                            {title: "发薪信息", index: "/home/payroll"},
                        ]
                    },
                    {
                        title: "客户管理",
                        index: "customerManagement",
                        icon: "el-icon-s-custom",
                        subnav: [
                            {title: "客户列表", index: "customerList"},
                        ]
                    },
                    {
                        title: "账号设置",
                        index: "setting",
                        icon: "el-icon-s-tools",
                        subnav: [
                            {title: "我的账号", index: "myaccount"},
                            {title: "角色管理", index: "rolemanage"},
                            {title: "数据权限管理", index: "datapermitmanage"},
                            {title: "用户权限管理", index: "userpermitmanage"},
                            {title: "账号管理", index: "accountmanage"},
                        ]
                    },
                ],
                isCollapse: true
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            collapseNav() {
                // 执行修改isCollapse
                this.$store.commit("changeCollapse")
            },
            handleSelect(key) {
                sessionStorage.setItem('currentMenu', key);
            }
        },
    };
</script>
<style lang="less" scoped>
    /* 顶部菜单标题 */
    .menu-group-title {
        color: #fff;
        text-align: center;
        font-size: 20px;
        height: 8vh;
        line-height: 8vh;
        background-color: #4da1ff;
    }
    /* 菜单列表区域 */
    /deep/.el-menu-vertical-demo {
        width: 100%;
        height: 86vh;
        text-align: left;
        border-right: none;
        overflow: auto;
        position: relative;
        /* 菜单展开宽度 */
        &:not(.el-menu--collapse) {
            width: 200px;
            min-height: 100%;
        }
        /* 一级菜单图标 */
        .submenu-icon {
            color: #fff;
            font-size: 20px;
        }
        /* 一级下拉箭头 */
        .el-icon-arrow-down {
            color: #fff;
        }
        /* 一级菜单 */
        .el-submenu__title {
            text-align: left;
        }
        /* 二级菜单 */
        .el-menu-item {
            text-align: left;
            text-indent: 20px;
            color: #333333;
        }
    }
    /* 折叠菜单 */
    .collapse-icon {
        background-color: #4da1ff;
        width: 100%;
        height: 6vh;
        line-height: 6vh;
        color: #fff;
        padding: 0 20px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
            background-color: #3e81cc;
        }
    }
</style>
